<script>
import request from "@/utils/request"
import store from "@/store"
import { userActionType } from "@/store/modules/user"
import rightArrowIcon from "./assets/right-arrow.png"
import popupPicker from "@/components/popupPicker/index.vue"
import inputPopup from "./components/inputPopup.vue"
import dateUtils from "@/utils/dateUtils"
export default {
  name: "aboutStudy",
  components: { popupPicker, inputPopup },
  data() {
    return {
      inputForm: {
        examId: "", //考试id
        examName: "", //考试名称
        targetScore: "", //目标分数
        currentGrade: "", //现在年级
        targetCollege: "", //目标院校
        currentStatus: "", //考研状态
        examTime: "", //考试时间
        preparationNumber: "", //备考次数
        universityCollege: "", //大学院校
        undergraduateMajor: "", //大学专业
      },
      rightArrowIcon,
      optionList: {
        examList: [], //考试列表
        gradeList: [
          { value: "大一", label: "大一" },
          { value: "大二", label: "大二" },
          { value: "大三", label: "大三" },
          { value: "大四", label: "大四" },
          { value: "其他", label: "其他" },
        ],
        currentStatusList: [
          { value: "在职考研", label: "在职考研" },
          { value: "在读考研", label: "在读考研" },
          { value: "全职备考", label: "全职备考" },
        ],
      },
      currentDateString: "",
    }
  },
  created() {
    //处理时间选择器
    this.currentDateString = dateUtils.formatDate(new Date(), "yyyy-MM-dd")
    if (this.userInfo.personalInfo) {
      this.inputForm = this.userInfo.personalInfo
    }
    //获取考试列表
    request({
      url: "exam/getAllExam",
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.optionList.examList = data
    })
  },
  props: { userInfo: Object },
  methods: {
    submit() {
      request({
        url: "userinfo/editPersonalInfo",
        data: this.inputForm,
				showLoading: true,
				errorHandle: true,
      }).then(async () => {
        //刷新用户信息
        await store.dispatch(userActionType.action.refreshUserInfo)
        this.parent.init()
      })
    },
  },
  provide() {
    return {
      parent: this,
    }
  },
  inject: ["parent"],
}
</script>

<template>
  <view class="component">
    <view class="item" @click="$refs.examPicker.open()">
      <view class="label">考试</view>
      <view class="right">
        <view class="value" v-if="inputForm.examName">{{ inputForm.examName }}</view>
        <view class="placeholder" v-else>请选择</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <popupPicker
      ref="examPicker"
      :picker-option-list="optionList.examList"
      picker-value-key="examId"
      picker-label-key="examName"
      v-model="inputForm.examId"
      @change="
        (item) => {
          inputForm.examName = item.examName
          submit()
        }
      "
      title="请选择考试"
    ></popupPicker>

    <view class="item" @click="$refs.targetScorePopup.open()">
      <view class="label">目标分数</view>
      <view class="right">
        <view class="value" v-if="inputForm.targetScore">{{ inputForm.targetScore }}</view>
        <view class="placeholder" v-else>请输入</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <inputPopup
      ref="targetScorePopup"
      v-model="inputForm.targetScore"
      title="目标分数"
      placeholder="请输入考试的目标分数"
      @submit="submit"
    />

    <view class="item" @click="$refs.currentGradePicker.open()">
      <view class="label">现在年级</view>
      <view class="right">
        <view class="value" v-if="inputForm.currentGrade">{{ inputForm.currentGrade }}</view>
        <view class="placeholder" v-else>请选择</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <popupPicker
      ref="currentGradePicker"
      :picker-option-list="optionList.gradeList"
      v-model="inputForm.currentGrade"
      title="请选择年级"
      @change="submit"
    ></popupPicker>

    <template v-if="inputForm.examName && inputForm.examName.includes('考研')">
      <view class="item" @click="$refs.currentStatusPicker.open()">
        <view class="label">考研状态</view>
        <view class="right">
          <view class="value" v-if="inputForm.currentStatus">{{ inputForm.currentStatus }}</view>
          <view class="placeholder" v-else>请选择</view>
          <image class="icon" :src="rightArrowIcon"></image>
        </view>
      </view>
      <popupPicker
        ref="currentStatusPicker"
        :picker-option-list="optionList.currentStatusList"
        v-model="inputForm.currentStatus"
        title="请选择考研状态"
        @change="submit"
      ></popupPicker>

      <view class="item" @click="$refs.targetCollegePopup.open()">
        <view class="label">目标院校</view>
        <view class="right">
          <view class="value" v-if="inputForm.targetCollege">{{ inputForm.targetCollege }}</view>
          <view class="placeholder" v-else>请输入</view>
          <image class="icon" :src="rightArrowIcon"></image>
        </view>
      </view>
      <input-popup
        ref="targetCollegePopup"
        v-model="inputForm.targetCollege"
        title="目标院校"
        placeholder="请输入考研目标院校"
        @submit="submit"
      />
    </template>

    <picker
      mode="date"
      :start="currentDateString"
      @change="
        (e) => {
          inputForm.examTime = e.detail.value
          submit()
        }
      "
    >
      <view class="item" style="border-bottom: 2rpx solid #eeeeee">
        <view class="label">考试时间</view>
        <view class="right">
          <view class="value" v-if="inputForm.examTime">{{ inputForm.examTime }}</view>
          <view class="placeholder" v-else>请选择</view>
          <image class="icon" :src="rightArrowIcon"></image>
        </view>
      </view>
    </picker>

    <view class="item" @click="$refs.preparationNumberPopup.open()">
      <view class="label">备考次数</view>
      <view class="right">
        <view class="value" v-if="inputForm.preparationNumber">{{ inputForm.preparationNumber }}</view>
        <view class="placeholder" v-else>请输入</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <input-popup
      ref="preparationNumberPopup"
      v-model="inputForm.preparationNumber"
      title="备考次数"
      placeholder="例如一战/二战/三战"
      @submit="submit"
    />

    <view class="item" @click="$refs.universityCollegePopup.open()">
      <view class="label">大学院校</view>
      <view class="right">
        <view class="value" v-if="inputForm.universityCollege">{{ inputForm.universityCollege }}</view>
        <view class="placeholder" v-else>请输入</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <input-popup
      ref="universityCollegePopup"
      v-model="inputForm.universityCollege"
      title="大学院校"
      placeholder="请输入您所就读/毕业的大学院校"
      @submit="submit"
    />

    <view class="item" @click="$refs.undergraduateMajorPopup.open()">
      <view class="label">大学专业</view>
      <view class="right">
        <view class="value" v-if="inputForm.undergraduateMajor">{{ inputForm.undergraduateMajor }}</view>
        <view class="placeholder" v-else>请输入</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <input-popup
      ref="undergraduateMajorPopup"
      v-model="inputForm.undergraduateMajor"
      placeholder="请输入您所就读/毕业的大学专业"
      title="大学专业"
      @submit="submit"
    />
  </view>
</template>

<style scoped lang="scss">
.component {
  .item {
    height: 104rpx;
    font-size: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:not(:last-child) {
      border-bottom: 2rpx solid #eeeeee;
    }
    .label {
      color: #666666;
    }
    .right {
      display: flex;
      align-items: center;
      .icon {
        width: 27rpx;
        height: 27rpx;
        margin-left: 20rpx;
      }
      .placeholder {
        color: #cccccc;
      }
    }
  }
}
</style>
